<template>
<!-- <SkeletonScreen type="text" v-if="idea_banner.length == 0 "/> -->
  <div class="home">
    <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white" :show-indicators="false">
      <van-swipe-item v-for="(item,index) of banner" :key="item._id" @click="goto_detail(item._id)">
		  <!-- <router-link :to="`/home/${item._id}?collectionName=home`"> -->
		  <router-link :to="{name:'home-detail',params:{_id:item._id},query:{collectionName:'banner'}}">
			 <img :src="item.banner" alt="" style=" width: 100%;height: 100%;"/>			 
			 <!-- <img :src="$serverUrl + itme.banner" alt=""/> //针对老师的数据 -->
			   <div class="text-box">
			     <h2>{{item.title}}</h2>
			     <p>{{item.sub_title}}</p>
			   </div> 
		  </router-link>
    </van-swipe-item>
	</van-swipe>
	
     <div class="newsList">
	    <ul>
	     <router-link 
	        tag="li"
	        v-for="(item,index) of home" 
	        :key="item._id"
	        :to="`/home/${item._id}?collectionName=home`"
	      >
	        <a href="">
				<img :src="item.detail.auth_icon" >
	          <!-- <h2>{{index + 1 }}.{{item.title}}</h2> -->
	          <p>{{item.des}}</p>
	        </a>
	      </router-link>
	    </ul>
	  </div>
  
   
	
	
  </div>
</template>

<script>
	// import SkeletonScreen from '../components/Skeleton-screen.vue'
	import {mapState} from 'vuex'
  export default {
    name:'home',
    // props:{},
    // components:{},
 mounted(){
   // axios({
   // this.$axios({
   //   url:'/news/banner',
   //   params:{_limit:5},
   // }).then(
   //   res=>this.banner=res.data
   // )
   this.$store.dispatch('home/banner')
   
  //  this.$axios({
  //    url:'/news/home',
  //    params:{_limit:30},
  //  }).then(
  //    res=>{
		//  // console.log(res.data)
		//  this.home=res.data
	 // }
  //  )
  this.$store.dispatch('home/home')
 },
    // updated(){},
 //    methods:{
	// 	goto_detail(_id){
	// 		// this.$router.push(`/home/${_id}?collectionName=home`)
	// 	}
	// },
    computed: mapState('home',['home','banner'])
  }
</script>

<style scoped>
 .my-swipe .van-swipe-item {
   color: #fff;
   font-size: 20px;
   line-height: 150px;
   background-color: #39a9ed;
   float: left;
 }
 
 .my-swipe{max-width:6.4rem; margin:0 auto; }
 .my-swipe{margin-top:0.6rem;position: relative;overflow: hidden; z-index: 1}
 .my-swipe .van-swipe-item{width:6.4rem;float:left;position: relative;}
 .my-swipe img{width:100%; display:block;}
 .my-swipe .text-box{width:5.8rem; padding:0 0.3rem;height:1.24rem; position:absolute; left:0; bottom:0; color:#fff; background:rgba(0,0,0,0.5);}
 .my-swipe h2{ font-size:0.3rem; font-weight:normal; margin-top:0.22rem; line-height:100%; margin-bottom:0.22rem; overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align: center;}
 .my-swipe p{ line-height:100%;text-align: center;}
 
 
 .newsList{width:6.4rem; margin:0 auto;}
 .newsList ul{ padding:0 0.4rem;}
 .newsList ul li{ color:#494d4d; padding:0.2rem 0; border-bottom:1px dashed #ccc;}
 .newsList ul li a{display: flex;align-content: space-between;align-items: center;}
 .newsList ul li img{max-height:0.9rem; font-size:0.33rem; overflow:hidden;margin-right: 0.625rem;}
 .newsList ul li p{max-height:1.8rem; margin-top:0.05rem;overflow:hidden;}
 .newsList{clear: both;margin-bottom:1rem;}
 
 
</style>

